<script id="integrationTemp" type="text/x-kendo-template">
    <div class="card mb-3">
        <h5 class="card-header">交互区域</h5>
        <div class="card-body">本仓库就是将 Kendo UI for jQuery 和 Bootstrap 4 整合在一起搭建的前台网站和后台管理框架~ 以下是 Bootstrap 4 的卡片瀑布流及模态框示例：</div>
    </div>
    <div class="card">
        <h5 class="card-header">结果区域</h5>
        <div class="card-body">
            <div class="card-columns">
                <div class="card text-white bg-primary mb-3">
                    <div class="card-header">天马座<small class="text-white-50 ml-2">Pegasus</small><span class="h5 float-right">★★★</span></div>
                    <div class="card-body">
                        <h5 class="card-title">星矢<small class="text-white-50 ml-2">SEIYA</small></h5>
                        <p class="card-text">　　本作主角。具有极强的战斗力，平时像个孩子，性格天真又活泼。但战斗时，尤其是雅典娜遇到危难，便会不顾一切的去战斗，能燃烧最大限度的小宇宙进行战斗，经历了无数战斗，是雅典娜最忠诚的战士。</p>
                        <ul>
                            <li>年　龄：13岁</li>
                            <li>身　高：165cm</li>
                            <li>体　重：53kg</li>
                            <li>生　日：12月1日</li>
                            <li>星　座：天马座</li>
                            <li>血　型：B型</li>
                            <li>出身地：日本</li>
                            <li>修炼地：希腊圣域</li>
                            <li>必杀技：
                                <ul>
                                    <li>天马流星拳</li>
                                    <li>天马彗星拳</li>
                                    <li>天马回旋碎击拳</li>
                                    <li>天马回旋摔</li>
                                </ul>
                            </li>
                        </ul>
                        <p class="card-text"><small>声优：古谷彻、森田成一（冥界篇）<br>　　　江森浩子（少年时代）</small></p>
                        <button class="btn btn-primary border" type="button" data-toggle="modal" data-target="#BootstrapModal">Bootstrap Primary</button>
                    </div>
                    <div class="card-footer">红颜：城户沙织、萨尔娜、美惠</div>
                </div>
                <div class="card text-white bg-success mb-3">
                    <div class="card-header">天龙座<small class="text-white-50 ml-2">Dragon</small><span class="h5 float-right">★★★☆</span></div>
                    <div class="card-body">
                        <h5 class="card-title">紫龙<small class="text-white-50 ml-2">SHIRYU</small></h5>
                        <p class="card-text">　　性格冷静沉稳，并且有为同伴和胜利随时献出生命的觉悟，因为星矢的一次救命之恩，所以他更加信任星矢，其师傅是上届圣战的幸存者：天秤座黄金圣斗士童虎，因此他也了解很多圣战的秘密，时常以军师身份提出建议。与星矢一起经历了无数战斗，是雅典娜身边最值得信赖的战士之一。</p>
                        <ul>
                            <li>年　龄：14岁</li>
                            <li>身　高：172cm</li>
                            <li>体　重：53kg</li>
                            <li>生　日：10月4日</li>
                            <li>星　座：天龙座</li>
                            <li>血　型：A型</li>
                            <li>出身地：日本</li>
                            <li>修炼地：中国庐山五老峰</li>
                            <li>必杀技：
                                <ul>
                                    <li>庐山升龙霸</li>
                                    <li>庐山龙飞翔</li>
                                    <li>庐山亢龙霸</li>
                                    <li>圣剑</li>
                                    <li>庐山百龙霸</li>
                                </ul>
                            </li>
                        </ul>
                        <p class="card-text"><small>声优：铃置洋孝、樱井孝弘（冥界篇）<br>　　　川岛千代子（少年时代）</small></p>
                        <button class="btn btn-success border" type="button" data-toggle="modal" data-target="#BootstrapModal">Bootstrap Success</button>
                    </div>
                    <div class="card-footer">红颜：春丽</div>
                </div>
                <div class="card text-white bg-info mb-3">
                    <div class="card-header">白鸟座<small class="text-white-50 ml-2">Cygnus</small><span class="h5 float-right">★★★☆</span></div>
                    <div class="card-body">
                        <h5 class="card-title">冰河<small class="text-white-50 ml-2">HYOGA</small></h5>
                        <p class="card-text">　　水瓶座黄金圣斗士卡妙的弟子，最初是奉圣域之命参加银河战争，杀掉擅自私斗的青铜圣斗士们，但在经历战斗后成为星矢的同伴。大部分时候表现出冷酷的性格，但是外冷内热，也时常思念长眠于北极冰海中的母亲。与星矢一起经历了无数战斗，是雅典娜身边最值得信赖的战士之一。</p>
                        <ul>
                            <li>年　龄：14岁</li>
                            <li>身　高：173cm</li>
                            <li>体　重：60kg</li>
                            <li>生　日：1月23日</li>
                            <li>星　座：白鸟座</li>
                            <li>血　型：O型</li>
                            <li>出身地：苏联</li>
                            <li>修炼地：西伯利亚</li>
                            <li>必杀技：
                                <ul>
                                    <li>冻结拳</li>
                                    <li>钻石星辰拳</li>
                                    <li>冰之环</li>
                                    <li>寒冷龙卷风</li>
                                    <li>金光火焰旋风拳</li>
                                    <li>冰凌柜</li>
                                    <li>曙光女神之宽恕</li>
                                    <li>冰封双腿法</li>
                                </ul>
                            </li>
                        </ul>
                        <p class="card-text"><small>声优：桥本晃一、三浦祥朗（冥界篇）<br>　　　佐藤智恵（少年时代）、冬马由美（少年时代）</small></p>
                        <button class="btn btn-info border" type="button" data-toggle="modal" data-target="#BootstrapModal">Bootstrap Info</button>
                    </div>
                    <div class="card-footer">红颜：弗莱娅、绘梨衣</div>
                </div>
                <div class="card text-white bg-danger mb-3">
                    <div class="card-header">仙女座<small class="text-white-50 ml-2">Andromeda</small><span class="h5 float-right">★★★★</span></div>
                    <div class="card-body">
                        <h5 class="card-title">瞬<small class="text-white-50 ml-2">SHUN</small></h5>
                        <p class="card-text">　　性格温和，多愁善感，被称为最善良的圣斗士，体内蕴藏着极强的小宇宙力量，但不喜欢杀戮，不到万不得已不会取人性命。因其灵魂纯洁无暇，一度被冥王哈迪斯选为转世的肉体。与星矢一起经历了无数次战斗，是雅典娜身边最值得信赖的战士之一。</p>
                        <ul>
                            <li>年　龄：13岁</li>
                            <li>身　高：165cm</li>
                            <li>体　重：51kg</li>
                            <li>生　日：9月9日</li>
                            <li>星　座：仙女座</li>
                            <li>血　型：A型</li>
                            <li>出身地：日本</li>
                            <li>修炼地：仙女岛</li>
                            <li>必杀技：
                                <ul>
                                    <li>仙女星云</li>
                                    <li>星云锁链</li>
                                    <li>旋转防御</li>
                                    <li>环状防御</li>
                                    <li>雷鸣波浪</li>
                                    <li>星云气流</li>
                                    <li>星云风暴</li>
                                </ul>
                            </li>
                        </ul>
                        <p class="card-text"><small>声优：堀川亮、粕谷雄太（冥界篇）<br>　　　冬马由美（少年时代）</small></p>
                        <button class="btn btn-danger border" type="button" data-toggle="modal" data-target="#BootstrapModal">Bootstrap Danger</button>
                    </div>
                    <div class="card-footer">红颜：珍妮</div>
                </div>
                <div class="card bg-warning mb-3">
                    <div class="card-header">凤凰座<small class="text-black-50 ml-2">Phoenix</small><span class="h5 float-right">★★★★★</span></div>
                    <div class="card-body">
                        <h5 class="card-title">一辉<small class="text-black-50 ml-2">IKKI</small></h5>
                        <p class="card-text">　　是仙女座瞬的哥哥，但性格与弟弟截然相反，刚强不屈，对敌人从不留情，被誉为“不死鸟”，实力强大，被称为青铜圣斗士中最强的战士。起初与星矢等人为敌，后来化解仇恨成为同伴，平时不与星矢他们在一起，一般会在关键时刻出现帮助他们。与星矢一起经历了无数战斗，非常信任星矢，是雅典娜身边最值得信赖的战士。</p>
                        <ul>
                            <li>年　龄：15岁</li>
                            <li>身　高：175cm</li>
                            <li>体　重：62kg</li>
                            <li>生　日：8月15日</li>
                            <li>星　座：凤凰座</li>
                            <li>血　型：AB型</li>
                            <li>出身地：日本</li>
                            <li>修炼地：南太平洋死亡皇后岛</li>
                            <li>必杀技：
                                <ul>
                                    <li>凤凰幻魔拳</li>
                                    <li>凤翼天翔</li>
                                </ul>
                            </li>
                        </ul>
                        <p class="card-text"><small>声优：堀秀行、小西克幸（冥界篇）<br>　　　上村典子（少年时代）</small></p>
                        <button class="btn btn-warning border" type="button" data-toggle="modal" data-target="#BootstrapModal">Bootstrap Warning</button>
                    </div>
                    <div class="card-footer">红颜：艾丝美拉达、潘多拉</div>
                </div>
                <div class="card bg-light mb-3">
                    <div class="card-header">女神<small class="text-black-50 ml-2">Ἀθήνη</small><span class="h5 float-right">★★★★★</span></div>
                    <div class="card-body">
                        <h5 class="card-title">雅典娜<small class="text-black-50 ml-2">Athena</small></h5>
                        <p class="card-text">　　数百年一次，当世界被邪恶入侵时诞生的女神雅典娜的转世，在《圣斗士星矢》中，车田正美把雅典娜设定为和平与正义的象征，所以圣斗士们守护大地的和平与正义，即等同于守护雅典娜，圣斗士们守护雅典娜的本质，就是守护大地的和平与正义。在《圣斗士星矢》中，十三年前艾俄罗斯拼死救出刚刚转世不久的婴儿雅典娜，后把她托付给城户光政，雅典娜在日本长大成人，成为亚洲最大的财团古拉度集团的实质支配者。在后来不断的战斗中，雅典娜与青铜圣斗士们不断成长，为了守护人类与大地，与邪恶势力展开了一场又一场的悲壮战斗。</p>
                        <ul>
                            <li>年　龄：13岁</li>
                            <li>身　高：155cm</li>
                            <li>体　重：44kg</li>
                            <li>生　日：9月1日</li>
                            <li>血　型：A型</li>
                        </ul>
                        <p class="card-text"><small>声优：潘惠子、折笠富美子（冥界篇）</small></small></p>
                        <button class="btn btn-light border" type="button" data-toggle="modal" data-target="#BootstrapModal">Bootstrap Light</button>
                    </div>
                    <div class="card-footer">下属：圣斗士</div>
                </div>
                <div class="card text-white bg-secondary mb-3">
                    <div class="card-header">海皇<small class="text-white-50 ml-2">Ποσειδῶν</small><span class="h5 float-right">★★★★★</span></div>
                    <div class="card-body">
                        <h5 class="card-title">波塞冬<small class="text-white-50 ml-2">Poseidon</small></h5>
                        <p class="card-text">　　过去曾经和雅典娜争夺陆地霸权的波塞冬，如今以朱利安的肉体复活，波塞冬一直以来附身于地上中海船王世家索罗家族，这一次复活则是因为加隆偶然发现三叉戟而起，并非波塞冬的本意。加上加隆的暗中策划，海皇对于海斗士的控制没有达到应有的程度。但是，在星矢的一击下，波塞冬完全复活，决心以大洪水洗清地面人类的罪孽，并且让世界重新建立起无污染的理想国。当海皇的灵魂被雅典娜再次封印之后，朱利安和苏兰特一起周游世界，但海皇的人格偶尔也会苏醒。在圣斗士们来到极乐净土，对战双子神的关键时候，波塞冬利用神力为他们送去了黄金圣衣。</p>
                        <ul>
                            <li>年　龄：16岁</li>
                            <li>身　高：177cm</li>
                            <li>体　重：59kg</li>
                            <li>生　日：3月21日</li>
                            <li>血　型：O型</li>
                        </ul>
                        <p class="card-text"><small>声优：难波圭一</small></p>
                        <button class="btn btn-secondary border" type="button" data-toggle="modal" data-target="#BootstrapModal">Bootstrap Secondary</button>
                    </div>
                    <div class="card-footer">下属：海斗士</div>
                </div>
                <div class="card text-white bg-dark mb-3">
                    <div class="card-header">冥王<small class="text-white-50 ml-2">Ἅιδης</small><span class="h5 float-right">★★★★★</span></div>
                    <div class="card-body">
                        <h5 class="card-title">哈迪斯<small class="text-white-50 ml-2">Hades</small></h5>
                        <p class="card-text">　　为了夺取现时代仙女座瞬的身体，潘多拉在瞬年幼时和他的哥哥一辉接触过。圣战时，哈迪斯凭借自身灵魂让冥斗士看瞬的样子。在星矢他们闯入冥界时夺取了瞬的身体，但是之后被雅典娜的血给赶出身体逃往极乐净土。在哈迪斯神殿的最终决战，虽然爆发真正实力把身穿神圣衣的星矢等人打得毫无还手之力，但是自己也受了轻伤。之后，雅典娜用生命之球将五人保护起来。在随后与雅典娜的对决中刚开始时，雅典娜处于下风。但此时被突然袭来的星矢打飞，却反手一剑将星矢刺得生死未卜。最后被雅典娜集结剩下四位圣斗士的小宇宙给彻底杀死。哈迪斯所创造的极乐净土、地狱与冥界也一起消失了。</p>
                        <ul>
                            <li>年　龄：13岁</li>
                            <li>身　高：184cm</li>
                            <li>体　重：73kg</li>
                            <li>生　日：9月9日</li>
                            <li>血　型：A型</li>
                        </ul>
                        <p class="card-text"><small>声优：粕谷雄太（瞬的身体）、大冢明夫（真身）</small></p>
                        <button class="btn btn-dark border" type="button" data-toggle="modal" data-target="#BootstrapModal">Bootstrap Dark</button>
                    </div>
                    <div class="card-footer">下属：冥斗士</div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="BootstrapModal" role="dialog" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fab fa-bootstrap fa-2x align-middle mr-2"></i>Bootstrap 4 模态框</h5>
                    <button class="close" type="button" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">这里是一个原生的 Bootstrap 模态框~ 没有借助任何 Kendo UI for jQuery 的功能来实现~ 两者可以完美地整合在一起~</div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">关 闭</button>
                    <button class="btn btn-primary" type="button" data-dismiss="modal">确 定</button>
                </div>
            </div>
        </div>
    </div>
    <style scoped>
        @media only screen and (min-width: 1200px) {
            .card-columns {
                column-count: 4;
            }
        }
        @media only screen and (min-width: 1024px) and (max-width: 1199px) {
            .card-columns {
                column-count: 3;
            }
        }
        @media only screen and (min-width: 576px) and (max-width: 1023px) {
            .card-columns {
                column-count: 2;
            }
        }
        @media only screen and (max-width: 575px) {
            .card-columns {
                column-count: 1;
            }
        }
        .modal-backdrop {
            z-index: 10000;
        }
        .modal {
            z-index: 10001;
        }
    </style>
</script>